<script setup>
import {onMounted, ref} from "vue";
import {Edit, Plus} from "@element-plus/icons-vue";
import axios from "axios";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";
onMounted(()=>{
  getData()
})
const route=useRoute()
const id=route.query.id
const courses = ref([])
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0)
const dialogVisible=ref(false)
const dialogVisible2=ref(false)
const submitVisible=ref(true)
const form=ref({})
const form2=ref({})
const dialogTitle = "评教"
const dialogTitle2 = "修改评教"
let rateRecord=ref({})
const rateRecord2=ref({})
const dialogOk = () => {
  dialogVisible.value = false;
  rateRecord.value.session = form.value.session;
  rateRecord.value.semester = form.value.semester;
  rateRecord.value.teachingContent = form.value.teachingContentScore;
  rateRecord.value.teachingFun = form.value.teachingFunScore;
  rateRecord.value.communication = form.value.communicationScore;
  rateRecord.value.personalAdvice = form.value.personalAdvice;
  axios.post("http://localhost:8080/rate",JSON.stringify(rateRecord.value),{
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res=>{
    const sta="评教中"
    axios.put(`http://localhost:8080/rate/${rateRecord.value.sno}/${rateRecord.value.cno}/${sta}`
    ).then(res=>{
      getData();
    })
    ElMessage.success("评教成功")
  }).catch(err=>{
    ElMessage.error("评教失败，请稍后重试")
    console.log(err)
  })
};
const dialogOk2 = () => {
  rateRecord2.value.session = form2.value.session;
  rateRecord2.value.semester = form2.value.semester;
  rateRecord2.value.teachingContent = form2.value.teachingContentScore;
  rateRecord2.value.teachingFun = form2.value.teachingFunScore;
  rateRecord2.value.communication = form2.value.communicationScore;
  rateRecord2.value.personalAdvice = form2.value.personalAdvice;
  axios.put("http://localhost:8080/rate",JSON.stringify(rateRecord2.value),{
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res=>{
    ElMessage.success("修改成功")
    getData();
  }).catch(err=>{
    ElMessage.error("修改失败，请稍后重试");
    console.log(err)
  })
  dialogVisible2.value = false;
}
const submit=()=>{
  const sta="已评教"
  axios.put(`http://localhost:8080/rates/${sta}?sno=${id}`
  ).then(res=>{
    getData();
    submitVisible.value=false;
    ElMessage.success("提交成功")
  }).catch(err=>{
    ElMessage.error("提交失败，请稍后重试");
    console.log(err)
  })
}
const getData= () =>{
  axios.get("http://localhost:8080/getMySCByPage",{
    params:{
      pageNum:currentPage.value,
      pageSize:pageSize.value,
      sno:id
    }
  }).then(res=>{
    courses.value=res.data.records
    total.value=res.data.total
  }).catch(err=>{
    ElMessage.error("获取数据失败，请稍后重试");
    console.log(err)
  })
}
//切换每页显示条数
const handleSizeChange=(pagesize)=>{
  pageSize.value=pagesize
  getData();
}
//切换当前页码
const handleCurrentChange=(pageNum)=>{
  currentPage.value=pageNum
  getData();
}
const handleAddRate=(row)=>{
  rateRecord.value.sno = row.sno;
  rateRecord.value.cno = row.cno;
  rateRecord.value.tno = row.tno;
  dialogVisible.value=true
}
const handleEditRate=(row)=>{
  axios.get(`http://localhost:8080/rate/${row.sno}/${row.cno}`).then(res=>{
    form2.value.session = res.data.session;
    form2.value.semester = res.data.semester;
    form2.value.teachingContentScore = res.data.teachingContent;
    form2.value.teachingFunScore = res.data.teachingFun;
    form2.value.communicationScore = res.data.communication;
    form2.value.personalAdvice = res.data.personalAdvice;
  })
  rateRecord2.value=row;
  dialogVisible2.value=true
}
</script>

<template>
  <div>
    <el-button type="primary" style="margin-left: 77%" @click="submit" v-if="submitVisible">提交</el-button>
    <el-table class="currentTable" :data="courses"
              :header-cell-style="{ background: '#f6f9fa'}">
      <!--el-table-column列-->
      <el-table-column prop="sno" label="学号"></el-table-column>
      <el-table-column prop="cno" label="课程号"></el-table-column>
      <el-table-column prop="tno" label="教师号"></el-table-column>
      <el-table-column prop="tname" label="教师姓名"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column label="操作" min-width="180">
        <template #default="{ row }">
          <el-button type="primary" size="small" :icon="Plus" @click="handleAddRate(row)" v-if="row.status==='未评'">评教</el-button>
          <el-button type="primary" size="small" :icon="Edit" @click="handleEditRate(row)" v-if="row.status==='评教中'">评教</el-button>
          <el-form :disabled="true" v-if="row.status==='已评教'">已评教</el-form>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="justify-content: center;margin-top: 8px"
    />
    <el-form style="text-align: center">
      <div>1-特差，2-差，3-合格，4-良好，5-优秀</div>
    </el-form>
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
      <el-form :model="form" >
        <el-form-item label="学年">
          <el-date-picker
              v-model="form.session"
              type="year"
              value-format="YYYY"
              format="YYYY"
              placeholder="请选择学年"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="学期">
          <el-select v-model="form.semester">
            <el-option label="第一学期" value="第一学期"></el-option>
            <el-option label="第二学期" value="第二学期"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学内容评分">
          <el-select v-model="form.teachingContentScore">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学趣味评分">
          <el-select v-model="form.teachingFunScore">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通表达评分">
          <el-select v-model="form.communicationScore">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人建议">
          <el-input v-model="form.personalAdvice" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogOk">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog :title="dialogTitle2" v-model="dialogVisible2">
      <el-form :model="form2" >
        <el-form-item label="学年">
          <el-date-picker
              v-model="form2.session"
              type="year"
              value-format="YYYY"
              format="YYYY"
              placeholder="请选择学年"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="学期">
          <el-select v-model="form2.semester">
            <el-option label="第一学期" value="第一学期"></el-option>
            <el-option label="第二学期" value="第二学期"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学内容评分">
          <el-select v-model="form2.teachingContentScore">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教学趣味评分">
          <el-select v-model="form2.teachingFunScore">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通表达评分">
          <el-select v-model="form2.communicationScore">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人建议">
          <el-input v-model="form2.personalAdvice" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogOk2">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>